<template>
  <div class="login">
    <div class="card">
      <div class="header">
        <div style="display:flex">
          <div class="logos"></div>
          <div style="display:flex;flex-direction: column;">
            <div class="stitle" style="padding-top:20px">融创大健康Al中医药膳系统</div>
            <div class="" style="color:#666;margin-left:22px;margin-top:-12px">Rong Chuang Big Health Al TCM Tonic Diet system</div>
          </div>
        </div>
        <div class="btn" @click="loyout">退出</div>
      </div>
    </div>
    <div class="card">
      <div class="flex">
        <div style="width: 65%;">
          <swiper
            :modules="modules"
            :slides-per-view="3"
            :slides-per-group="1"
            :space-between="10"
            @swiper="onSwiper"
            @slideChange="onSlideChange"
            :autoplay="{ delay: 2000, disableOnInteraction: false }"
            :loop="true"
            :speed="1000"
          >
            <swiper-slide v-for="(item, index) in data.list" :key="index">
              <view
                class="back"
                style="
                  width: 100%;
                  height: 280px;
                  background: #fff;
                  padding: 20px 0px;
                  border-radius: 20px;
                "
              >
                <div style="display: flex; align-items: center; justify-content: center">
                  <el-image
                    style="width: 140px; height: 100px;border-radius:10px"
                    :src="item.healthType"
                    fit="fill"
                    :preview-src-list="[item.healthType]"
                  />
                </div>

                <div style="padding: 20px 20px">
                  <view class="title" style="font-size: 16px;color: rgb(208, 165, 34);">{{ item.diet }}</view>
                  <div class="gong">功效:</div>
                  <div style="font-size:12px;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 9; /* 这里是超出几行省略 */
    overflow: hidden;">
                    {{item.dietEffect}}
                  </div>
                </div>
              </view>
            </swiper-slide>
          </swiper>
        </div>
        <div class="search" style="height:320px">
          <div class="stitle">中医体质查询</div>
          <div style="color: #888; font-size: 14px; font-weight: bold; margin-top: 0px">
            姓名查询：
          </div>
          <div style="height: 3px; background: #888; width: 30%; margin-top: 2px"></div>
          <el-input
            v-model="data.queryParams.queryGroup1[0].value"
            placeholder="输入姓名"
            class="input-with-select"
            style="margin: 10px 0;width:200px"
          >
            <template #prepend>
              <el-icon><User /></el-icon>
            </template>
          </el-input>

          <div style="color: #888; font-size: 14px; font-weight: bold">
            注：AI中医预留姓名
          </div>
          <div class="flexs">
            <div class="searchBtn" style="margin-top: 5%" @click="searchClick">
              点击查询
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      v-model="dialogVisible"
      title="人员列表"
      width="500"
      :before-close="handleClose"
    >
      <el-table :data="data.tableData.rows" style="width: 100%">
        <el-table-column fixed prop="checkTime" label="检测时间" width="160" />
        <el-table-column prop="personName" label="姓名" width="120" />
        <el-table-column prop="personPhone" label="手机号" width="120" />
        <el-table-column prop="constitutionNames" label="状态" width="120" />
        <el-table-column fixed="right" label="查看" width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="EditTable(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="data.total > 0"
        :total="data.total"
        v-model:page="data.queryParams.page"
        v-model:limit="data.queryParams.size"
        @pagination="searchClick"
      />
    </el-dialog>
    <div class="el-login-footer">
      <span>Copyright © 2018-2025 山西融创康养科技有限公司.</span>
    </div>
    
  </div>
</template>

<script>
import {   Autoplay } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import { useRouter } from "vue-router";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
// Import Swiper styles

import "swiper/css";
// import "swiper/css/navigation";
// import "swiper/css/pagination";
import { listTongue } from "@/api/tongue";
import { listDiet } from "@/api/diet";

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    // const navigation = {
    //   nextEl: ".icon-next",
    //   prevEl: ".icon-pre",
    //   disabledClass: "disable",
    // };

    // const pagination = {
    //   clickable: true,
    //   bulletClass: "dot",
    //   bulletActiveClass: "actived",
    //   el: ".pagination",
    // };

    const onSwiper = (swiper) => {
      console.log(swiper);
    };
    const onSlideChange = () => {
      console.log("slide change");
    };

    const data = reactive({
      queryParams: {
        page: 1,
        size: 10,
        order:'desc',
        sort:'a.completeTime',
        queryGroup1: [
          {
            connector: "blank",
            name: "a.checkPersonName",
            type: "String",
            operator: "LK",
            value: "",
          },
        ],
      },
      total: 0,
      list: [],
      tableData: [],
    });
    const loyout = async () => {
      await ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });

      await userStore.logout();
      location.href = import.meta.env.VITE_APP_CONTEXT_PATH + "index";
    };
    const router = useRouter();
    const searchClick = async () => {
      if (data.queryParams.queryGroup1[0].value && data.queryParams.queryGroup1[0].value!='飞'&& data.queryParams.queryGroup1[0].value!='娅飞'&& data.queryParams.queryGroup1[0].value!='娅' && data.queryParams.queryGroup1[0].value!='黄娅飞') {
        const loading = ElLoading.service({
          lock: true,
          text: "Loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        let res = await listTongue(data.queryParams);
        let obj = JSON.parse(res.Response);
        if (obj.data.page) {
          data.tableData = obj.data.page;
          data.total = obj.data.page.total;

          loading.close();
          dialogVisible.value = true;
        } else {
          //没有
          router.push({ path: "/search" });
          loading.close();
        }
      } else {
        ElMessage({
          message: "输入姓名",
          type: "warning",
        });
      }

      // temperatureList.value = obj.data.page.rows;
    };
    const dialogVisible = ref(false);

    const EditTable = (row) => {
      console.log(row, "EditTableEditTable");
      // router.push({
      //   name: "detail",
      //   params: {
      //     id: row.personName,
      //   },
        
      // });
      router.push({ 
        path: '/detail', 
        query: { 
          name: JSON.stringify(row)
        }})
    };

    const handleClose = (done) => {
      ElMessageBox.confirm("关闭弹框?")
        .then(() => {
          done();
        })
        .catch(() => {
          // catch error
        });
    };
    onMounted(async () => {
      // listTongue
      let queryParams = {
        pageNum: 1,
        pageSize: 1000,
      };
      let res = await listDiet(queryParams);
      data.list = res.rows;
      console.log(data.list);
    });

    return {
      modules: [ Autoplay],
      onSwiper,
      onSlideChange,
      searchClick,
      data,
      loyout,
      dialogVisible,
      handleClose,
      EditTable,
    };
  },
};
</script>

<style scoped lang="scss">
.login {
  background-image: url("../assets/images/banner.jpg");
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 100% 100%; // 修改为contain，图片按比例缩放以适应容器，不裁剪
  background-position: center;
  background-repeat: no-repeat;
}
.logos {
  background-image: url("../assets/images/logo.png");
  width: 70px;
  height: 70px;
  background-size: 100% 100%; // 修改为contain，图片按比例缩放以适应容器，不裁剪
  background-position: center;
  background-repeat: no-repeat;
}
.card {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 3%;
}
.header {
  width: 80%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btn {
  background: rgb(208, 165, 34);
  padding: 10px 25px;
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  border-radius: 10px;
}
.flex {
  display: flex;
  justify-content: space-between;
  width: 80%;
}

.carousel-item {
  color: #475669;
  opacity: 0.75;
  margin: 0;
  text-align: center;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  display: flex;
  align-items: center;
  margin: 0;
  text-align: center;
  height: 100%;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.back {
  display: flex;
  flex-direction: column;
  padding: 0 20px;
}
.swiper-slide {
  background: #fff;
  // height: 600px;
  border-radius: 20px;
}
.gong {
  font-size: 16px;
  font-weight: bold;
  color: rgb(108, 108, 108);
  margin-top: 15px;
}
.title {
  font-size: 26px;
  font-weight: bold;
  color: rgb(108, 108, 108);
  margin-top: 15px;
}
.cards {
  font-size: 20px;
  color: #888;
  margin-top: 15px;
}
.search {
  background: #fff;
  padding: 2% 2%;
  border-radius: 20px;
  // height: 600px;
}
.stitle {
  font-size: 22px;
  padding: 10px 20px;
  color: rgb(208, 165, 34);
  font-weight: bold;
  letter-spacing: 5px;
  text-align:center
}
.searchBtn {
  background: rgb(208, 165, 32);
  width: 90px;
  height: 90px;
  padding: 5% 5%;
  font-size: 14px;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flexs {
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-login-footer {
  // height: 40px;
  // line-height: 40px;
  position: fixed;
  bottom: 20px;
  width: 100%;
  text-align: center;
  // color: #fff;
  font-family: Arial, serif;
  font-size: 12px;
  letter-spacing: 1px;
}
</style>
